<template>
	<view class="content">
		<!-- 导航栏 -->
		<u-navbar :is-back="true" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="wrap">
			<view class="comment">
				<view class="top">
					<view class="left">
						<view class="heart-photo">
							<cmd-avatar :src="comment.avatar == '' ? '../../static/profile.jpg' : 'http://localhost:8088' + comment.avatar" :size="32">
							</cmd-avatar>
						</view>
						<view class="user-info">
							<view class="name">{{ comment.cuserName }}</view>
							<view class="date">{{$u.timeFormat(comment.commTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
						</view>
					</view>
				</view>
				<view class="content">{{ comment.content }}</view>
			</view>
			<view class="all-reply">
				<view class="all-reply-top">全部回复（{{ comment.allReply }}）</view>
				<view class="item" v-for="(item, index) in replyList" :key="index">
					<view class="comment">
						<view class="top">
							<view class="left">
								<view class="heart-photo">
									<cmd-avatar :src="item.avatar == '' ? '../../static/profile.jpg' : 'http://localhost:8088' + item.avatar" :size="32">
									</cmd-avatar>
									</view>
								<view class="user-info">
									<view class="name">{{ item.ruserName }}</view>
									<view class="date">{{$u.timeFormat(item.reTime, 'yyyy-mm-dd hh:MM:ss')}}</view>
								</view>
							</view>
						</view>
						<view class="content">{{ item.content }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				title: "评论详情",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				replyList: [],
				comment: ''
			}
		},
		onLoad(option) {
			// console.log(option.cId);
			this.getReply(option.cId);
		},
		methods: {
			// 回复列表
			getReply(cId) {
				Vue.prototype.$u.api.getCommentByCId({
					cId: cId
				}).then(res => {
					if(res){
						this.comment = res;
					}else{
						console.log(res)
					}
				});
				Vue.prototype.$u.api.getReplyByCId({
					cId: cId
				}).then(res => {
					if(res){
						this.replyList = res;
					}else{
						console.log(res)
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #f2f2f2;
	}
	.comment {
		padding: 30rpx;
		font-size: 32rpx;
		background-color: #ffffff;
		.top {
			display: flex;
			justify-content: space-between;
		}
		.left {
			display: flex;
			.heart-photo {
				image {
					width: 64rpx;
					height: 64rpx;
					border-radius: 50%;
					background-color: #f2f2f2;
				}
			}
			.user-info {
				margin-left: 10rpx;
				.name {
					color: #5677fc;
					font-size: 28rpx;
					margin-bottom: 4rpx;
				}
				.date {
					font-size: 20rpx;
					color: $u-light-color;
				}
			}
		}
	}
	.all-reply {
		margin-top: 10rpx;
		padding-top: 20rpx;
		background-color: #ffffff;
		.all-reply-top {
			margin-left: 20rpx;
			padding-left: 20rpx;
			border-left: solid 4rpx #5677fc;
			font-size: 30rpx;
			font-weight: bold;
		}
		.item {
			border-bottom: solid 2rpx $u-border-color;
		}
	}
</style>
